<template>
    <!-- {{ cartList }} -->
    <el-table
        ref="multipleTableRef"
        :data="cartList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="400"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        v-loading="loading"
    >
        <el-table-column type="selection" width="55" />
        <el-table-column label="商品信息" width="320">
            <template #default="scope">
                <router-link
                    :to="`/goods/${scope.row.goods_id}`"
                    class="goods-info"
                >
                    <el-image :src="scope.row.goods_picture" fit="cover" />
                    <span>
                        {{ scope.row.goods_name }}
                    </span>
                </router-link>
            </template> </el-table-column
        ><el-table-column label="单价" width="220">
            <template #default="scope"
                >￥{{ scope.row.goods_price }}</template
            > </el-table-column
        ><el-table-column label="数量" width="220">
            <template #default="scope">
                <el-popover
                    placement="top"
                    :width="200"
                    trigger="click"
                    :visible="scope.row.visible"
                >
                    <template #reference>
                        <el-button
                            style="width: 50px"
                            @click="scope.row.visible = true"
                            :disabled="scope.row.disabled"
                            >{{ scope.row.number }}</el-button
                        >
                        {{ scope.row.disabled }}
                    </template>
                    <div class="count">
                        <el-button @click="scope.row.testNumber++">+</el-button>
                        <el-input
                            class="center-input"
                            v-model.number="scope.row.testNumber"
                        />
                        <el-button
                            @click="
                                () => {
                                    if (scope.row.testNumber == 1) return

                                    scope.row.testNumber--
                                }
                            "
                            >-</el-button
                        >
                    </div>
                    <div class="confirm">
                        <el-button
                            size="small"
                            text
                            @click="
                                () => {
                                    scope.row.visible = false
                                    scope.row.testNumber = scope.row.number
                                }
                            "
                            >取消</el-button
                        >
                        <el-button
                            size="small"
                            type="primary"
                            color="#da9233"
                            @click="
                                () => {
                                    if (
                                        scope.row.number == scope.row.testNumber
                                    ) {
                                        return
                                    }
                                    scope.row.visible = false
                                    modifyGoodsNumber(
                                        scope.row.goods_id,
                                        scope.row.testNumber
                                    ).then(res => {
                                        //    修改数量成功
                                        scope.row.number = res.number
                                        modifySuccess()
                                    })
                                }
                            "
                            >修改</el-button
                        >
                    </div>
                </el-popover>
            </template> </el-table-column
        ><el-table-column label="小计" width="200">
            <template #default="scope"
                >￥{{
                    (scope.row.goods_price * scope.row.number).toFixed(2)
                }}</template
            > </el-table-column
        ><el-table-column label="操作" width="180">
            <template #default="scope">
                <div class="operation">
                    <span @click="del(scope.row.goods_id)">删除</span>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <div class="checkout">
        <span
            >共{{ cartList.length }}种商品，已选择{{ checkGoods }}种，共{{
                checkCount
            }}件，商品合计<b style="color: red">￥{{ total }}</b></span
        >
        <span
            ><el-button
                color="#da9233"
                :disabled="checkDisabled"
                @click="toCheck"
                >下单结算</el-button
            ></span
        >
    </div>
    <el-dialog
        v-model="delCenterDialogVisible"
        title="提示"
        width="30%"
        align-center
        center
    >
        <span> 你是否要删除该商品？ </span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="delCenterDialogVisible = false"
                    >取消</el-button
                >
                <el-button type="primary" @click="delCartGoods()">
                    删除
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog
        v-model="alertCenterDialogVisible"
        title="提示"
        width="30%"
        align-center
        center
    >
        <span> 您还未完善城市信息，推荐您先去完善个人信息地址。 </span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="alertCenterDialogVisible = false"
                    >暂不完善</el-button
                >
                <el-button type="primary" @click="$router.push('/member/info')">
                    去完善
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElTable, ElMessage } from 'element-plus'
import { modifyGoodsNumber, delCartGoodsById } from '@/apis/cart'
import { useRouter } from 'vue-router'
import { sendOrderInfo } from '@/apis/order'
const { cartList } = defineProps(['cartList'])
const emits = defineEmits(['change'])
const multipleTableRef = ref()
const delCenterDialogVisible = ref(false)
const alertCenterDialogVisible = ref(false)
const orderList = ref({})
const router = useRouter()
let loading = ref(true)
let checkDisabled = ref(true)
let checkGoods = ref(0)
let checkCount = ref(0)
let total = ref(0)
let currentGoods = ref('')
// val就是选中的目标值
const handleSelectionChange = val => {
    orderList.value = val
    checkGoods.value = val.length
    checkCount.value = 0
    total.value = 0
    val.forEach(e => {
        checkCount.value += e.number
        let t = e.number * +e.goods_price
        total.value = t + +total.value
        total.value = (+total.value).toFixed(2)
        // 选中之后禁用数量修改按钮
        cartList.forEach(el => {
            if (el.goods_id == e.goods_id) {
                el.disabled = true
                checkDisabled.value = false
            }
        })
    })
    if (val.length == 0) {
        cartList.forEach(el => {
            el.disabled = false
        })
        checkDisabled.value = true
    }
}
setTimeout(() => {
    loading.value = false
}, 1500)
// 商品数量修改成功
const modifySuccess = () => {
    ElMessage({
        message: '商品数量修改成功',
        type: 'success',
    })
}
// 删除购物车商品
const del = id => {
    delCenterDialogVisible.value = true
    currentGoods.value = id
}
const delCartGoods = () => {
    delCenterDialogVisible.value = false
    delCartGoodsById(currentGoods.value).then(res => {
        // 删除成功  通知父组件更新数据
        emits('change')
    })
}

// 结算事件
const toCheck = () => {
    total.value = +total.value
    // 先判断用户是否完善了登录信息
    if (
        JSON.parse(localStorage.getItem('useManage')).profile.city?.country ==
            '' ||
        Object.getOwnPropertyNames(
            JSON.parse(localStorage.getItem('useManage')).profile.city
        ).length == 0
    ) {
        // 未完善
        alertCenterDialogVisible.value = true
    } else {
        // 已完善
        sendOrderInfo({
            totalPrice: total.value,
            orderList: orderList.value,
        }).then(res => {
            if (res) {
                router.push({
                    path: '/order',
                    query: {
                        order_id: res,
                    },
                })
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.goods-info {
    width: 300px;
    height: 60px;
    display: flex;
    align-items: center;
    .el-image {
        width: 60px;
    }
    span {
        margin-left: 20px;
        font-size: 16px;
    }
}
.operation {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    span {
        transition: all ease 0.3s;
        &:hover {
            color: #da9233;
        }
    }
}
.count {
    display: flex;
    width: 100%;
    --el-color-primary: #da9233;
    justify-content: center;
}
.center-input {
    text-align: center;
    margin: 0 5px 0 5px;
    width: 50px;
    :deep(.el-input__inner) {
        text-align: center;
    }
}
.confirm {
    margin-left: 50px;
    margin-top: 10px;
    .el-button {
        :nth-child(1) {
            margin-left: 5px;
        }
        :nth-child(2) {
            margin-left: 5px;
        }
    }
}
.checkout {
    width: 1240px;
    height: 80px;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-top: 15px;
    span {
        &:nth-child(1) {
            font-size: 18px;
        }
        &:nth-child(2) {
            margin-left: 20px;
        }
        .el-button {
            margin-right: 50px;
            width: 140px;
            height: 50px;
            font-size: 22px;
            transition: all 0.3s ease;
        }
    }
}
</style>
